<template>
  <div class="component component--module tickers-wall">
    <div class="column column--full">
      <div class="content__wall ticker-wall">
        <div class="element element--list scroll-wall">
          <ul class="list list--tickers">
            <li class="list__item positive" v-for="(item, index) in linechartData" :key="index">
              <div class="item__content">
                <router-link class="ticker__link" :to="{ name: 'stockDetail', params: { symbol: item.symbol } }">
                  <div class="intraday__data">
                    <div class="ticker__name">
                      <span class="ticker__symbol">{{ item.symbol }}</span>
                      <h2 class="exchange__name">{{ item.name }}</h2>
                      <small class="status status--closed">
                        <i class="icon"></i>
                      </small>
                    </div>
                    <div class="company__name">
                      <h2>{{ item.cont }}</h2>
                    </div>
                    <h3 class="intraday__price">
                      <sup class="character"></sup>
                      <bg-quote class="value">{{ item.realtime.close }}</bg-quote>
                    </h3>
                    <bg-quote :class="[item.realtime.change_money < 0 ? 'negative' : 'position']" style="display:flex;">
                      <i class="icon icon--caret"></i>
                      <span class="change--point--q">
                        <bg-quote :class="[item.realtime.change_money < 0 ? 'negative' : 'position']">{{
                          item.realtime.change_money
                        }}</bg-quote>
                      </span>
                      <span class="change--percent--q">
                        <bg-quote :class="[item.realtime.change_money < 0 ? 'negative' : 'position']">{{
                          item.realtime.change_ratio }}%</bg-quote>
                      </span>
                    </bg-quote>
                  </div>
                  <Chart :xData="item.xData" :yData="item.yData"></Chart>
                </router-link>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import Chart from "./chart/chart.vue";
import homeRequest from "@/api/home.js";
// let props = defineProps(["linechartData"]);
const linechartData = ref([])
onMounted(() => {
  getLineList()
})
const getLineList = () => {
  homeRequest.getMarketLine({})
    .then((res) => {
      if (res.code === 0) {
        linechartData.value = res.data
        res.data.forEach((item) => {
          item.xData = []
          item.yData = []
          item.minKline.forEach((ik) => {
            item.xData.push(ik.currentTime)
            item.yData.push(ik.close)
          })
        })
      }
    })
    .catch((e) => {
      console.log("login error", e);
    });
}
</script>
<style scoped lang="scss">
.list__item {
  .intraday__change {
    color: #939393;
    font-weight: 600;
    display: flex;
  }
}

.status--closed {
  margin-top: -5px;
  display: inline-block;
}

.intraday__data .icon--caret {
  top: 2px;
  margin-right: 2px !important;
}
</style>
